/*
 * @Description: 备份功能栏
 * @Author: Zzt
 * @Date: 2022-08-12 09:20:08
 * @LastEditTime: 2022-08-15 11:45:37
 */
import { useMemo, useState } from 'react';
import { Button, Divider, Space } from 'antd';
import AddPlan from './dialogs/AddPlan';
import { useBackupPlanContext } from '../contexts/BackupPlanContext';

const PageOperate = (props: any) => {
  const [tFormVisible, setTFormVisible] = useState(false);
  const { deleteBackupPlan, delId } = useBackupPlanContext();

  return (
    <div className="filter-container">
      <p className="page-title">备份计划设定</p>
      <Space size="small">
        <Button
          onClick={() => {
            setTFormVisible(true);
          }}
        >
          创建计划
        </Button>
        <Button>修改计划</Button>
        <Button
          onClick={() => {
            deleteBackupPlan(delId);
          }}
        >
          删除计划
        </Button>
        <Button>导出计划</Button>
        <Button>导入计划</Button>
        <Divider type="vertical" />
        <Button>筛选</Button>
      </Space>
      {useMemo(
        () => (
          <AddPlan
            visible={tFormVisible}
            onClose={() => {
              setTFormVisible(false);
            }}
          />
        ),
        [tFormVisible]
      )}
    </div>
  );
};

export default PageOperate;
